<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美逊商城注册页面</title>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
		<link rel="shortcut icon" type="image/png" href="images/title.png"/>
	</head>
	<body>
		<main>
			<div id="main-header">
				<a href="#">
					<img src="images/register/header-top.png"/>
				</a>
				<span>我已经注册，马上<a href="login.html">登陆</a></span>
			</div>
			<section id="main-content">
				<div style="font-size: 0;">
					<div id="person" class="header-top-active-border">
						<a href="">个人用户注册</a>
					</div>
					<div id="company" class="header-top-unactive-border">
						<a href="">企业用户注册</a>
					</div>
				</div>
				<div class="main-content-box">
					<div class="main-content">
						<div class="main-content-nav">
							<ul>
								<li class="active-li"><span class="active-number">1</span>&emsp;设置用户信息</li>
								<li><span class="active-number">2</span>&emsp;验证手机</li>
								<li><span class="active-number">3</span>&emsp;注册成功</li>
							</ul>
						</div>
						<span class="congrutulation"></span>
						<form novalidate="novalidate" ng-submit="formSubmit()" name="registerForm" ng-app="reFormApp" ng-controller="reFormController">
							<div class="form-box">
								<label for="username">用&emsp;户&emsp;名：</label>
								<input type="text" placeholder="请输入2-10位由数字和字母组成的用户名" ng-model="username" id="username" name="username" required ng-minlength="2" ng-pattern="/^([\u4e00-\u9fa5]||[a-z|A-Z|0-9]){2,10}$/"/>
								<span class="error-box hasSameName">用户名已被注册</span>
								<span ng-show="registerForm.username.$dirty && registerForm.username.$error.required" class="error-box" >用户名不能为空</span>
								<span ng-show="registerForm.username.$dirty && !registerForm.username.$error.required && registerForm.username.$invalid" class="error-box" >用户名应由2-10位中文、英文和数字组成</span>
								<span ng-show="registerForm.username.$valid && registerForm.username.$dirty" id="usernameOk"><img src="images/ok.gif"/></span>
							</div>
							<div class="form-box">
								<label for="password">请输入密码：</label>
								<input type="password" placeholder="请输入6-20位密码，可由英文、数字及标点符号组成" ng-model="password" name="password" id="password" ng-minlength="6" ng-maxlength="20" required />
								<span ng-show="registerForm.password.$dirty && registerForm.password.$error.required" class="error-box" >密码不能为空</span>
								<span ng-show="registerForm.password.$dirty && (!registerForm.password.$error.required) && registerForm.password.$invalid" class="error-box" >6-20位字符，可由英文、数字组成</span>
								<span ng-show="registerForm.password.$valid && registerForm.password.$dirty"><img src="images/ok.gif"/></span>
								<div class="password-strength-box">
									<span class="password-strength-gray"></span>
									<span class="password-strength-gray"></span>
									<span class="password-strength-gray"></span>
									<span class="password-strength-text">弱</span>
									<span class="password-strength-text">中</span>
									<span class="password-strength-text">强</span>
								</div>
							</div>
							<div class="form-box">
								<label for="confirm-psw">请确认密码：</label>
								<input type="password" placeholder="请再次输出密码" name="confirmPassword" id="confirm-psw" ng-model="confirmPassword" ng-minlength="6" ng-maxlength="20" required ng-pattern="/^([a-z|A-Z|0-9]){6,20}$/"/>
								<span class="error-box" ng-show="registerForm.confirmPassword.$dirty && registerForm.confirmPassword.$error.required">密码不能为空</span>
								<span class="error-box" ng-show="((password!=confirmPassword) && registerForm.confirmPassword.$dirty) || (registerForm.confirmPassword.$invalid && (!registerForm.confirmPassword.$error.required)) ">两次输入密码不同，请重新输入</span>
								<span ng-show="(password==confirmPassword) && registerForm.confirmPassword.$valid"><img src="images/ok.gif"/></span>
							</div>
							<div class="form-box">
								<label for="vertification">图文验证码：</label>
								<input type="text" placeholder="请输入图片上的验证码" id="vertification"/>
								<span class=" verification-code"></span>
								<span class="verification-refresh">
									<b>看不清</b>
									<b class="verification-next">换一张</b>
								</span>
								<span class="right-box-fade" id="right-img"><img src="images/ok.gif"/></span>
								<span class="error-box text-error">图文验证码输入错误</span>
							</div>
							
							<input type="submit" class="next-button" ng-disabled="registerForm.$invalid||!(password==confirmPassword)" value="下一步" />
						</form>
						<div class="hidden-box">
							<div class="form-box">
				                <label for="">手&emsp;机&emsp;号：</label>
				                <input type="text" name="tel" placeholder="请填写正确的手机号" id="tel"/>
				              	<span class="right-tel"><img src="images/ok.gif"/></span>
				              	<span class="error-box error-tel">请填写正确的手机号</span>
				            </div>
				            <div class="form-box">
				                <input type="checkbox" class="agreement" /> 
				                <span>我已阅读并同意<a href="">《美逊商城会员注册协议》</a></span>
				            </div>
				            <input class="next-button register" value="注册" type="button"/>
						</div>
					</div>
				</div>
			</section>
		</main>
		<footer>
			<div id="footTop">
				<div id="bottom-inner">
					<dl>
						<dt>帮助中心</dt>
						<dd><a href="">购物流程</a></dd>
						<dd><a href="">查看已购买商品</a></dd>
						<dd><a href="">会员等级</a></dd>
						<dd><a href="">忘记密码</a></dd>
						<dd><a href="">交易须知</a></dd>
					</dl>
					<dl>
						<dt>支付方式</dt>
						<dd><a href="">发票保障</a></dd>
						<dd><a href="">在线支付</a></dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd><a href="">练习卖家</a></dd>
						<dd><a href="">退款申请</a></dd>
						<dd><a href="">退货款政策</a></dd>
					</dl>
					<dl>
						<dt>关于我们</dt>
						<dd><a href="">联系我们</a></dd>
						<dd><a href="">关于我们</a></dd>
					</dl>
					<dl>
						<dt>商家服务</dt>
						<dd><a href="">入驻协议</a></dd>
						<dd><a href="">入驻标准</a></dd>
						<dd><a href="">入住资费</a></dd>
						<dd><a href="">商家中心</a></dd>
						<dd><a href="">商家入驻</a></dd>
					</dl>
					<dl>
						<dt>客服中心</dt>
						<dd><a href="">客服电话</a></dd>
					</dl>
					<div class="clear"></div>
				</div>
			</div>
			<div id="footBottom">
				<div id="footBottom-cneter">
					<div>
						<span><a href="">首页</a></span><span>|</span>
						<span><a href="">合作及洽谈</a></span><span>|</span>
						<span><a href="">联系我们</a></span><span>|</span>
						<span><a href="">关于我们</a></span><span>|</span>
						<span><a href="">回到顶部</a></span>
					</div>
					<div>
						<img src="images/mz_FootImgInfo1.png"/>
						<img src="images/mz_FootImgInfo2.png"/>
					</div>
					<p>编号： 鲁ICP备13025849号-1  美逊版权所有  邮箱：mayzone360@163.com </p>
				</div>
			</div>
		</footer>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/angular.min.js"></script>
	<script src="js/register.js"></script>
</html>
